<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  #block {
    width: 100px;
    height: 100px;
    background-color: orange;
    transform: translateX(0);
  }
</style>
<body>
  <div id="block"></div>
  <button id="btn1">已知目标位移和时间，加速度未知</button>
  <button id="btn2">已知时间和加速度，目标位移未知</button>
  <button id="btn3">已知目标位移和加速度，时间未知</button>
  <div style="height: 300px;"></div>
  <svg width="400" height="400" style="border:10px solid red" viewbox="0 0 100 100">
    <rect x="0" y="0" width="100" height="100" style="fill:orange;stroke-width:1;stroke:rgb(0,0,0)"></rect>
  </svg>
</body>
<script>
  var block = document.getElementById('block')

  var a = `matrix(1, 2, 3, 4.444, 5.4344, 6.444)`
  var temp = a.match(/-?\d+/g)
  console.log(temp)

  // Promise.resolve().then(() => {
  //   console.log('promise')
  // })
  // console.log('sync')
  //
  // block.style.backgroundColor = 'red'
  // requestAnimationFrame(() => {
  //   console.log('requestAnimationFrame')
  //   block.style.backgroundColor = 'blue'
  // })
  // requestIdleCallback(() => {
  //   const s = performance.now()
  //   while (performance.now() - s < 1000) {
  //   }
  //   block.style.backgroundColor = 'red'
  // })

  var s0 = 0
  var s1 = 300
  var duration = 1500

  var S = s1 - s0
  var T = duration

  var timer = null

  function animate1() {
    cancelAnimationFrame(timer)
    // 初始时间
    var t0 = performance.now()

    function frame() {
      var t = performance.now() - t0
      var p = Math.min(t / T, 1)
      var s = S * Math.pow(p, 2)
      // var s = S * Math.sin(2 * Math.PI * p)

      if (p <= 1) {
        block.style.transform = `translateX(${s}px)`
        timer = requestAnimationFrame(frame)
      }
    }
    frame()
  }
  document.getElementById('btn1').onclick = animate1

  var a2 = 0.0008
  function animate2() {
    cancelAnimationFrame(timer)
    var t0 = performance.now()

    function frame() {
      var t = performance.now() - t0
      s = 1/2 * a2 * Math.pow(t, 2)
      if (t <= T) {
        block.style.transform = `translateX(${s}px)`
        timer = requestAnimationFrame(frame)
      }
    }
    frame()
  }

  document.getElementById('btn2').onclick = animate2


  var a3 = 0.00008
  function animate3() {
    cancelAnimationFrame(timer)
    var t0 = performance.now()

    function frame() {
      var t = performance.now() - t0
      s = 1/2 * a3 * Math.pow(t, 2)
      if (s <= S) {
        block.style.transform = `translateX(${s}px)`
        timer = requestAnimationFrame(frame)
      }
    }
    frame()
  }

  document.getElementById('btn3').onclick = animate3




function fibonacci(n, cache) {
  const __cache = cache || [] 
  if (n == 1 || n == 2) {
    return 1
  }
  if (!__cache[n]) {
    __cache[n] = fibonacci(n - 2, __cache) + fibonacci(n - 1, __cache)
  }
  return __cache[n]
}


function sort(array) {
  const len = array.length
  if (len === 1) {
    return array
  }
  const middle = Math.floor(len / 2);
  const left = array.slice(0, middle);
  const right = array.slice(middle);
  console.log(right, sort(right))
  return merge(sort(left), sort(right))
}

function merge(left, right) {
  var result = [];

  while(left.length && right.length) {
    if (left[0] <= right[0]) {
      result.push(left.shift())
    } else {
      result.push(right.shift())
    }
  }
  while(left.length) {
    result.push(left.shift())
  }
  while(right.length) {
    result.push(right.shift())
  }
  return result
}



function bucketSort(nums) {
  // 初始化 k = n/2 个桶
  const k = nums.length / 2;
  const buckets = [];
  for (let i = 0; i < k; i++) {
    buckets.push([]);
  }
  // 1. 将数组元素分配到各个桶中
  for (const num of nums) {
    // 输入数据范围为 [0, 1)，使用 num * k 映射到索引范围 [0, k-1]
    const i = Math.floor(num * k);
    // 将 num 添加进桶 i
    buckets[i].push(num);
  }
  // 2. 对各个桶执行排序
  for (const bucket of buckets) {
    // 使用内置排序函数，也可以替换成其他排序算法
    bucket.sort((a, b) => a - b);
  }
  // 3. 遍历桶合并结果
  let i = 0;
  for (const bucket of buckets) {
    for (const num of bucket) {
      nums[i++] = num;
    }
  }
}

function foo1() {
  console.log('foo1')
}

function foo2() {
  foo1()
}

function foo3() {
  foo2()
}

foo3()

function accumulation(min, max, value = 0) {
  // 递归停止条件
  if (max === min) {
    return min + value
  }
  let __value = value + max
  // 拆解为同类子问题，并调用自身
  return accumulation(min, max - 1, __value)
}
</script>
</html>


